<template>
  <div id="app">
    <!-- 动态绑定路由动画，根据路由状态的不同绑定不同的路由动画分别为‘slide-left’和'slide-right' -->
    <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>
    <loading v-model="isLoading" :text="loadingText"></loading>
    <toast v-model="toastModel" type="text" :text="toastText" width="auto"></toast>
  </div>
</template>

<script>
  import { Loading, Toast } from 'vux'

  export default {
    name: 'App',
    components: {
      Loading,
      Toast
    },
    data(){
      return{
        transitionName: 'slide-right'
      }
    },
    // 监听路由变化时的状态为前进还是后退
    watch: {
      '$route'(to, from){
        let isBack = this.$router.isBack
        if(isBack){
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = 'slide-left'
        }
        this.$router.isBack = false
      }
    },
    computed: {
      isLoading: {
        get () {
          return this.$store.state.isLoading
        }
      },
      loadingText:{
        get () {
          return this.$store.state.loadingText
        },
        set (val) {
          this.$store.state.loadingText = val
        }
      },
      toastModel: {
        get () {
          return this.$store.state.toastModel
        },
        set (val) {
          this.$store.state.toastModel = val
        }
      },
      toastText: {
        get () {
          return this.$store.state.toastText
        }
      }
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

/* 给前进后退动画添加不同的动画效果 */
.Router {
  position: absolute;
  width: 100%;
  transition: all .5s ease;
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100% 0);
}
</style>
